﻿@{
    ViewData["Title"] = "验证码统计";
    Layout = "~/Views/Shared/_LayoutNone.cshtml";
}
<div class="layui-fluid">
    <!-- 按日统计 -->
    <div class="layui-col-sm12" style="margin-bottom: 10px">
        <div class="layui-card">
            <div class="layui-card-header">
                验证码统计
            </div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-sm12">
                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagetwo">
                            <div carousel-item id="LAY-chart-codes-day">
                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 检索数据 -->
    <div class="layui-col-sm12">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">手机号:</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="mobile_phone" name="mobile_phone" maxlength="11" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">终端:</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="code_from" name="code_from" maxlength="50" placeholder="请输入终端" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">发送时间:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input time" id="created_at" name="created_at" placeholder="选择发送时间" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="LAY-app-contlist-search">
                            查询
                        </button>
                        <button class="layui-btn layui-btn-primary" lay-submit lay-filter="LAY-app-contlist-reset">重置</button>
                        <button class="layui-btn layuiadmin-btn-list" data-type="export">导出验证码</button>
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
            </div>
        </div>
    </div>
</div>

<script src="~/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/'
    }).extend({
        index: '/lib/index'
    }).use(['index', 'table', 'laydate', 'util'], function () {
        var table = layui.table
            , admin = layui.admin
            , form = layui.form
            , laydate = layui.laydate
            , util = layui.util;

        var num = 2;

        lay('.time').each(function () {
            laydate.render({
                elem: this,
                range: true
            });
        });

        loading = layer.load(2, {
            shade: [0.2, '#000']
        });

        // 验证码统计
        admin.req({
            url: '/codes/chartbyday'
            , data: null
            , done: function (res) {
                layer.close(loading);
                // console.log(`res=${JSON.stringify(res)}`);
                var month_num = [];
                var month_data = [];
                $.each(res.data, function (i, item) {
                    month_num.push(res.data[i].year + "年" + res.data[i].month + "月" + res.data[i].day + "日");
                    month_data.push(res.data[i].count);
                });

                layui.define(function (e) {
                    var a = layui.admin;
                    layui.use(["admin", "carousel"], function () {
                        var e = layui.$,
                            a = (layui.admin, layui.carousel),
                            l = layui.element,
                            t = layui.device();
                        e(".layadmin-carousel").each(function () {
                            var l = e(this);
                            a.render({
                                elem: this,
                                width: "100%",
                                arrow: "none",
                                interval: l.data("interval"),
                                autoplay: l.data("autoplay") === !0,
                                trigger: t.ios || t.android ? "click" : "hover",
                                anim: l.data("anim")
                            })
                        }), l.render("progress")
                    }), layui.use(["carousel", "echarts"], function () {
                        var e = layui.$,
                            a = (layui.carousel, layui.echarts),
                            l = [],
                            t = [{
                                tooltip: {
                                    trigger: "axis"
                                },
                                calculable: !0,
                                legend: {
                                    data: ["每日验证码发送统计走势图"]
                                },
                                xAxis: [{
                                    type: "category",
                                    data: month_num,
                                    axisLabel: {
                                        formatter: "{value}"
                                    }
                                }],
                                yAxis: [{
                                    type: "value",
                                    name: "验证码总数",
                                    axisLabel: {
                                        formatter: "{value}"
                                    }
                                }],
                                series: [{
                                    name: "验证码条数",
                                    type: "line",
                                    itemStyle: {
                                        normal: {
                                            areaStyle: {
                                                type: "default"
                                            }
                                        }
                                    },
                                    data: month_data
                                }]
                            }],
                            i = e("#LAY-chart-codes-day").children("div"),
                            n = function (e) {
                                l[e] = a.init(i[e], layui.echartsTheme), l[e].setOption(t[e]), window.onresize = l[e].resize
                            };
                        i[0] && n(0)
                    })
                });

            }
        });

        // 加载表格数据
        table.render({
            elem: "#LAY-app-content-list",
            url: "/codes/list",
            toolbar: false,
            cols: [
                [
                    {
                        type: "numbers",
                        title: "序号",
                        width: 80
                    },
                    {
                        field: "country_code",
                        title: "国家代码",
                        width: 100
                    },
                    {
                        field: "mobile_phone",
                        title: "手机号",
                        minWidth: 300
                    },
                    {
                        field: "code_num",
                        title: "验证码",
                        align: "center",
                        width: 150
                    },
                    {
                        field: "code_from",
                        title: "终端",
                        width: 150
                    },
                    {
                        field: "due_minute",
                        title: "有效期(分钟)",
                        align: "center",
                        width: 150
                    },
                    {
                        field: "format_time",
                        title: "发送时间",
                        sort: !0,
                        width: 180
                    }]
            ],
            page: !0,
            limit: 10,
            limits: [10, 20, 50, 200, 500]
        }),

            // 监听搜索
            form.on('submit(LAY-app-contlist-search)', function (data) {
                var field = data.field;
                table.reload('LAY-app-content-list', {
                    where: field,
                    page: {
                        curr: 1
                    }
                });
            });

        var $ = layui.$, active = {
            export: function () {
                loading = layer.load(2, {
                    shade: [0.2, '#000']
                });

                admin.req({
                    headers: {
                        'RequestVerificationToken': csrfToken
                    },
                    method: 'POST',
                    data: { "mobile_phone": $("#mobile_phone").val(), "code_from": $("#code_from").val(), "select_date": $("#created_at").val() },
                    url: '/excel/exportcodes'
                    , done: function (res) {
                        layer.close(loading);
                        if (res.errcode) {
                            layer.open({
                                title: '错误提示'
                                , type: 1
                                , content: '<div style="color: red; padding: 20px;">' + res.errcode + ':' + res.errmsg + '</div>'
                                , btn: ["确定"]
                            });
                        } else if (res.code == 0 && res.count == 0) {
                            layer.msg(res.msg, {
                                offset: '15px'
                                , icon: 1
                                , time: 2000
                            });
                        } else {
                            location.href = res.path;
                        }
                    }
                });
            },
            refresh: function () {
                table.reload('LAY-app-content-list');
            }
        };

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
    </script>
